<template>
  <view class="app-container">
    <u-navbar
      placeholder
      fixed
      title="我的"
      left-icon=""
      bg-color="#3c9cff"
      :title-style="{ color: '#fff' }"
    ></u-navbar>
    <view class="flex-1" style="overflow-y: auto">
      <view class="info-bar flex items-center justify-between px-40" @click="toUserInfo">
        <view class="flex items-center">
          <u-avatar size="60" :src="userStore.wechatInfo.avatar_url"></u-avatar>
          <view class="ml-20">
            <u-text :text="userStore.wechatInfo.nickname" color="#fff"></u-text>
          </view>
        </view>
        <view>
          <u-text :text="userStore.riderInfo.phone" color="#fff"></u-text>
        </view>
      </view>
      <view class="p-20">
        <u-cell-group :border="false" style="background-color: #fff">
          <u-cell :border="false" title="我的钱包" is-link @tap="handleWallet"></u-cell>
          <u-cell :border="false" title="退出登录" is-link @tap="handleLogout"></u-cell>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { useUserStore } from "../../store/user";

  const userStore = useUserStore();

  function handleWallet() {
    uni.navigateTo({
      url: "/pages/wallet/wallet",
    });
  }

  function handleLogout() {
    uni.showModal({
      title: "提示",
      content: "是否继续退出登录",
      success: (res) => {
        if (res.confirm) {
          userStore.logout();
        }
      },
    });
  }
</script>

<style lang="scss" scoped>
  .info-bar {
    height: 300rpx;
    background-color: $u-primary;
    color: #fff;
  }
</style>
